<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input 
          type="text" 
          placeholder="搜索公司名称..." 
          v-model="searchKeyword"
          @confirm="searchCompanies"/>
      </view>
      <text class="cancel" @click="cancelSearch">取消</text>
    </view>
    
    <!-- 企业列表 -->
    <view class="company-list">
      <view 
        class="company-item" 
        v-for="(company, index) in companyList" 
        :key="company.companyId"
        @click="toCompanyDetail(company.companyId)">
        <image :src="company.logoUrl || '/static/images/logo-default.png'" mode="aspectFit" class="company-logo"></image>
        <view class="company-info">
          <view class="company-name">{{ company.companyName }}</view>
          <view class="company-industry">{{ company.companyIndustry }} · {{ company.companyScale }}</view>
          <view class="company-tags">
            <text class="tag" v-for="(tag, tagIndex) in company.industryTags" :key="tagIndex">{{ tag }}</text>
          </view>
          <view class="company-meta">
            <text class="address">{{ (company.location && company.location.city) || company.companyAddress }}</text>
          </view>
        </view>
        <uni-icons type="arrowright" size="18" color="#ccc" class="arrow"></uni-icons>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-if="companyList.length === 0 && !loading" class="empty-state">
      <uni-icons type="search" size="48" color="#ccc"></uni-icons>
      <text class="empty-text">暂无相关企业</text>
      <text class="empty-desc">请尝试其他关键词搜索</text>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && companyList.length > 0">
      <uni-load-more :status="loadingStatus" @click="loadMore"></uni-load-more>
    </view>
  </view>
</template>

<script>
import { getCompanyList } from '@/api/company.js'

export default {
  data() {
    return {
      searchKeyword: '',
      companyList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      loadingStatus: 'more', // more, loading, noMore
      hasMore: true
    }
  },
  onLoad(options) {
    // 如果有搜索关键词，直接搜索
    if (options.keyword) {
      this.searchKeyword = options.keyword
    }
    this.loadCompanies()
  },
  methods: {
    // 加载企业列表
    async loadCompanies(refresh = false) {
      if (this.loading) return
      
      this.loading = true
      if (refresh) {
        this.pageNum = 1
        this.companyList = []
        this.hasMore = true
      }
      
      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        
        // 如果有搜索关键词，添加到参数中
        if (this.searchKeyword.trim()) {
          // 这里可以根据后端接口要求添加搜索参数
          // params.keyword = this.searchKeyword.trim()
        }
        
        const res = await getCompanyList(params)
        
        if (res.code === 200) {
          const newList = res.rows || []
          this.total = res.total || 0
          
          if (refresh) {
            this.companyList = newList
          } else {
            this.companyList = [...this.companyList, ...newList]
          }
          
          // 判断是否还有更多数据
          this.hasMore = this.companyList.length < this.total
          this.pageNum++
          
          // 更新加载状态
          this.loadingStatus = this.hasMore ? 'more' : 'noMore'
        } else {
          uni.showToast({
            title: res.msg || '获取企业列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取企业列表失败', error)
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 搜索企业
    searchCompanies() {
      this.loadCompanies(true)
    },
    
    // 取消搜索
    cancelSearch() {
      uni.navigateBack()
    },
    
    // 跳转到企业详情
    toCompanyDetail(companyId) {
      uni.navigateTo({
        url: `/pages/company/detail?id=${companyId}`
      })
    },
    
    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.loadCompanies()
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 8px 15px;
  margin-right: 10px;
}

.search-input input {
  flex: 1;
  margin-left: 5px;
  font-size: 14px;
  color: #333;
  background: transparent;
}

.cancel {
  font-size: 14px;
  color: #666;
}

.company-list {
  flex: 1;
  padding: 10px 15px;
}

.company-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.company-logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 15px;
}

.company-info {
  flex: 1;
}

.company-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.company-industry {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.company-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tag {
  font-size: 12px;
  color: #999;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 5px;
  margin-bottom: 3px;
}

.company-meta {
  display: flex;
  align-items: center;
}

.address {
  font-size: 12px;
  color: #999;
}

.arrow {
  margin-left: 10px;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}

.empty-text {
  font-size: 16px;
  color: #666;
  margin: 15px 0 5px;
}

.empty-desc {
  font-size: 14px;
  color: #999;
}

.load-more {
  padding: 15px 0;
}
</style>